<template>
	<view class="">
		<view class="top_blue">
			<view class="yue_list">
				<view class="">
					<view class="keyong">应付余额（元）</view>
					<view class="price_num">1269.07</view>
				</view>
				<view class="dj">冻结余额：115.00</view>
			</view>
			<view class="card_txt" @click="card_go">银行卡</view>
		</view>
		<view class="cz_tx flex">
			<view class="czwidth flex">
				<image class="czimg" src="../../static/data_list/czimg.png" mode="widthFix"></image>
				<view class="cztxt">充值</view>
			</view>
			<view class="czwidth flex">
				<image class="czimg" src="../../static/data_list/tximg.png" mode="widthFix"></image>
				<view class="cztxt">提现</view>
			</view>
		</view>
		<view class="zh_tx">
			<view class="flex zhList" @click="zhanghu_mingxi">
				<view class="flex">
					<image class="zhimg" src="../static/sfimg.png" mode="widthFix"></image>
					<view class="cztxt">金额明细</view>
				</view>
				<image class="left_jt" src="../../static/images/user/icon_right_arrow.png" mode="widthFix"></image>
			</view>
			<view class="flex zhList">
				<view class="flex">
					<image class="zhimg" src="../static/tkimg.png" mode="widthFix"></image>
					<view class="cztxt">提款记录</view>
				</view>
				<image class="left_jt" src="../../static/images/user/icon_right_arrow.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			card_go() {
				uni.navigateTo({
					url: '/pagesC/dianpu_data/card_list'
				})
			},
			zhanghu_mingxi() {
				uni.navigateTo({
					url: '/pagesC/dianpu_data/zhanghu_mingxi'
				})
			},
		}
	}
</script>

<style>
	.zh_tx {
		padding: 20rpx 0 20rpx 0;
		width: 690rpx;
		background: #fff;
		margin: 20rpx auto auto;
		border-radius: 16rpx;
	}

	.zhList {
		width: 650rpx;
		height: 90rpx;
		margin: auto;
		justify-content: space-between;
		padding: 10rpx 0 10rpx 0;
	}

	.zhimg {
		width: 50rpx;
		display: block;
	}

	.left_jt {
		width: 30rpx;
		display: block;
	}

	.czwidth {
		width: 50%;
		justify-content: center;
	}

	.cztxt {
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
		margin-left: 15rpx;
	}

	.czimg {
		width: 70rpx;
		display: block;
	}

	.cz_tx {
		width: 690rpx;
		background: #fff;
		padding: 10rpx 0 10rpx 0;
		margin: 20rpx auto auto;
		border-radius: 16rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.dj {
		border: 1px solid #bfddf6;
		font-size: 28rpx;
		color: #fff;
		padding: 15rpx 20rpx 15rpx 20rpx;
		border-radius: 40rpx;
		margin-top: 20rpx;
	}

	.price_num {
		font-size: 28rpx;
		color: #fff;
		margin-top: 20rpx;
	}

	.keyong {
		font-size: 28rpx;
		color: #fff;
	}

	.card_txt {
		font-size: 28rpx;
		color: #fff;
		margin-left: 20rpx;
		padding-bottom: 30rpx;
	}

	.yue_list {
		display: flex;
		padding: 30rpx 0 50rpx 0;
		align-items: center;
		justify-content: space-between;
		width: 650rpx;
		margin: auto;
	}

	.top_blue {
		width: 690rpx;
		background: #0396fd;
		margin: 20rpx auto auto;
		border-radius: 16rpx;
		box-shadow: 0rpx 4rpx 16rpx 9rpx #bfddf6;
	}
</style>